<template>
  <div class="E-singer-classify">
    <dl class="wrap-tags">
      <dt>语种：</dt>
      <dd>
        <el-tag
          v-for="(tag, index) in languageTags"
          :key="index"
          :disable-transitions="true"
          :effect="classify.area===tag.value?'dark':'plain'"
          @click="$emit('onClick',{area:tag.value})"
        >{{tag.label}}</el-tag>
      </dd>
    </dl>
    <dl class="wrap-tags">
      <dt>分类：</dt>
      <dd>
        <el-tag
          v-for="(tag, index) in classifyTags"
          :key="index"
          :disable-transitions="true"
          :effect="classify.type===tag.value?'dark':'plain'"
          @click="$emit('onClick',{type:tag.value})"
        >{{tag.label}}</el-tag>
      </dd>
    </dl>
    <dl class="wrap-tags">
      <dt>筛选：</dt>
      <dd>
        <el-tag
          v-for="(tag, index) in filterTags"
          :key="index"
          :disable-transitions="true"
          :effect="classify.initial===tag.value?'dark':'plain'"
          @click="$emit('onClick',{initial:tag.value})"
        >{{tag.label}}</el-tag>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  props: ['classify'],
  data() {
    return {
      languageTags: [
        { label: '全部', value: -1 },
        { label: '话语', value: 7 },
        { label: '欧美', value: 96 },
        { label: '日本', value: 8 },
        { label: '韩国', value: 16 },
        { label: '其他', value: 0 }
      ],
      classifyTags: [
        { label: '全部', value: -1 },
        { label: '男歌手', value: 1 },
        { label: '女歌手', value: 2 },
        { label: '乐队', value: 3 }
      ],
      filterTags: [
        { label: '热门', value: -1 },
        { label: 'A', value: 'a' },
        { label: 'B', value: 'b' },
        { label: 'C', value: 'c' },
        { label: 'D', value: 'd' },
        { label: 'E', value: 'e' },
        { label: 'F', value: 'f' },
        { label: 'G', value: 'g' },
        { label: 'H', value: 'h' },
        { label: 'I', value: 'i' },
        { label: 'J', value: 'j' },
        { label: 'K', value: 'k' },
        { label: 'L', value: 'l' },
        { label: 'M', value: 'm' },
        { label: 'N', value: 'n' },
        { label: 'O', value: 'o' },
        { label: 'P', value: 'p' },
        { label: 'Q', value: 'q' },
        { label: 'R', value: 'r' },
        { label: 'S', value: 's' },
        { label: 'T', value: 't' },
        { label: 'U', value: 'u' },
        { label: 'V', value: 'v' },
        { label: 'W', value: 'w' },
        { label: 'X', value: 'x' },
        { label: 'Y', value: 'y' },
        { label: 'Z', value: 'z' },
        { label: '#', value: 0 }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.E-singer-classify {
  & > dl.wrap-tags {
    line-height: 32px;
    display: flex;
    & > dt {
      flex: 0 0 50px;
      text-align: right;
    }
    & > dd {
      flex-grow: 1;
      & > .el-tag {
        cursor: pointer;
        margin-right: 7px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
</style>
